<template>
  <div class="tab">
    <div class="tab-left">
      <van-tabs
        v-model:active="active"
        title-active-color="#333"
        title-inactive-color="#999"
        line-width="25px"
        line-height="3px"
        :swipe-threshold="4"
        :ellipsis="false"
      >
        <!-- //三级路由 -->
        <van-tab title="推荐" to="/home/recommend/recommend"> </van-tab>
        <van-tab title="即将上线" to="/home/recommend/beComingSoon"></van-tab>
        <van-tab title="排行榜" to="/home/recommend/ranking"></van-tab>
        <van-tab title="视频" to="/home/recommend/video"></van-tab>
      </van-tabs>
    </div>
    <!-- //搜索和头像 -->
    <div class="tab-right">
      <!-- //搜索页面跳转 -->
      <router-link to="/search">
        <div class="tab-right-sousuo">
          <img :src="require('@/assets/images/sousuo.png')" alt="" />
        </div>
      </router-link>
      <!-- //个人中心组建跳转 -->
      <div class="tab-right-photo">
        <Tabhead />
      </div>
    </div>
  </div>
  <router-view />
</template>

<script>
import Tabhead from "@/components/public/Tab-head.vue";
import { ref } from "vue";
import { useRouter } from "vue-router";

export default {
  setup() {
    const active = ref(0);
    const router = useRouter();
    //默认路由
    router.push("/home/recommend/recommend");
    return { active };
  },
  components: {
    Tabhead,
  },
};
</script>

<style scoped>
.tab {
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.tab-left {
  flex: 1;
}
.tab-right {
  width: 108px;
  display: flex;
  background: white;
}
.tab-right-sousuo {
  width: 60px;
  height: 60px;
}
.tab-right-sousuo img {
  width: 60px;
  height: 60px;
}
/deep/.van-tabs__wrap {
  height: 60px;
}
/deep/.van-tabs__line {
  background-color: #0adeee;
  bottom: 22px;
}
/deep/.van-tab {
  height: 60px;
}
/deep/.van-tab span {
  font-size: 18px;
  line-height: 60px;
}
/deep/.van-tab--active span {
  font-size: 20px;
  font-weight: 900;
}
.tab-right-photo {
  width: 48px;
  height: 60px;
  padding-top: 13px;
  padding-left: 5px;
}
</style>
